<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<%@ include file="/common.jsp" %>
<!-- 引入videojs组件 -->
	<link href="${pageContext.request.contextPath}/static/videojs-5.8.8/video-js.css" rel="stylesheet">
	<!-- If you'd like to support IE8 -->
	<script src="${pageContext.request.contextPath}/static/videojs-5.8.8/videojs-ie8.min.js"></script>
	
	<!-- 总js -->
	<script src="${pageContext.request.contextPath}/static/videojs-5.8.8/video.js"></script>
<!-- 引入videojs组件  End-->
<style type="text/css">
	/** 解决暂停时显示播放按钮  */
	.vjs-paused .vjs-big-play-button,
	.vjs-paused.vjs-has-started .vjs-big-play-button {
	    display: block;
	}
	/** 解决暂停时显示播放按钮    End*/
	
	/** 实现：点击屏幕切换播放/暂停*/
	.video-js.vjs-playing .vjs-tech {
	    pointer-events: auto;
	}
</style>
<script type="text/javascript">
var dataGrid;
var myPlayer;
var myPlayerPanel;
$(function() {
	myPlayerPanel = $("#myPlayerPanel").panel();
	
	dataGrid = $('#dataGrid').datagrid({
        url : '${pageContext.request.contextPath }/video/personalvideo/dataGrid',
        fit : true,
        striped : true,
        rownumbers : false,
        pagination : true,
        singleSelect : true,
        idField : 'id',
        sortName : 'createTime',
        sortOrder : 'asc',
        pageSize : 20,
        pageList : [ 10, 20, 30, 40, 50],
        columns : [ [ {
            width : '279',
            field : 'id',
            title : '可播放列表',
            formatter : function(value, row, index) {
            	return	'<table><tr>' +
						'<td rowspan=2 style="border:0"><img src="${pageContext.request.contextPath }/static/images/video.png" style="height:50px;"></td>' +
						'<td style="border:0">' +
						'<p>' + row.title + '</p>' +
						'<p>' + row.createTime + '</p>' +
						'</td>' +
						'</tr></table>';
            }
        }] ],
        toolbar : '#toolbar'
    });
    
	//视频播放器
	myPlayer = videojs('my-player', {
		controls: true ,//true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。
		autoplay: false ,//true/false   播放器准备好之后，是否自动播放 【默认false】
		fluid: true ,//宽高自适应，但这个必须要给定一个起始的高、宽，否则无法显示
		height: 9 ,//视频容器的高度，字符串或数字 单位像素
		width: 16 ,// 视频容器的宽度, 字符串或数字 单位像素
		loop: false ,// true/false 视频播放结束后，是否循环播放
		muted: true ,// true/false 是否静音
		poster:'', //播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
		preload:'none',//预加载:'auto' 自动;'metadata' 元数据信息 ，比如视频长度，尺寸等;'none'  不预加载任何数据，直到用户开始播放才开始下载
		sourceOrder: true,
	  	techOrder: ['html5', 'flash']//使用哪种技术播放，可选值有‘html5‘,‘flash‘  默认为[‘html5‘], 注意： 在v6.0.0 及以上的版本中，默认不包含flash的使用代码。如果要使用flash播放的，需要手动引入flash相关逻辑的代码。且需要指定swf文件的路径。
	},function(){//播放器加载完成后的回调函数
    	//this.src('');//手动设置视频播放器的视频源
	});
	
	myPlayer.on('play',function(){
    	var src = myPlayer.src();
    	if(src==undefined || src==''){
    		parent.$.messager.alert('提示', '请选择一个想要播放的视频!', 'info');
	 		return false;
    	}
	});
});

//播放选中的视频
function playFun(videoType, videoPath){
// 	console.info("要播放的视频的路径："+videoPath+"   ,videoType="+videoType);
	if(videoPath == undefined){
		parent.$.messager.alert('提示', '请选择一个想要播放的视频!', 'info');
	 	return ;
	}
	myPlayer.pause();
	
	//设置播放器的视频源
	if(videoType!=undefined && videoType !=''){
		myPlayer.src({type: videoType, src: videoPath});
	}else{
		myPlayer.src(videoPath);
	}
	/**设置播放器的视频源  方式二
 	var mp4src = document.getElementById('mp4src');
 	mp4src.setAttribute("src", videoPath);
	*/
	myPlayer.load();
	myPlayer.play();
}

//重播
function reloadFun(){
// 	alert(myPlayer.src());
	var type = '' , src = myPlayer.src();
	if(src.endsWith('.mp4')){
		type = 'video/mp4';
	}else if(src.endsWith('.webm')){
		type='video/webm';
	}else if(src.endsWith('.ogv')){
		type='video/ogg';
	}
	playFun(type,src);
}

//视频列表-播放
function playListFun(){
	var src = '';
	var type= '';
	var title = '111';
	try{
		var rows = dataGrid.datagrid('getSelections');
	 	src = rows[0].filePath;
	 	type = rows[0].fileType;
	 	title = rows[0].title;
	}catch(e){
		if(src == ''){
	    	parent.$.messager.alert('提示', '请选择一个想要播放的视频!', 'info');
	    	return ;
	    }
	}
	myPlayerPanel.panel('setTitle','正在播放：'+title);
	playFun(type,src);
}

function pauseOrPlayFun(obj){
	if(myPlayer.src()==undefined || myPlayer.src()==''){
   		parent.$.messager.alert('提示', '没有正在播放的视频，无需暂停！', 'info');
 		return false;
   	}

// 	console.info($(obj));
	var o = $(obj);
	var htmlStr = o.html();
	if(htmlStr.indexOf('暂停')>-1){
		myPlayer.pause();
		
		o.html('<span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">继续</span><span class="l-btn-icon fi-pause icon-black">&nbsp;</span></span>');
		
	}else if(htmlStr.indexOf('继续')>-1){
		myPlayer.play();
		
		o.html('<span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">暂停</span><span class="l-btn-icon fi-pause icon-black">&nbsp;</span></span>');
	}
	
}
</script>
<body class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'east',border:true,split:false,title:'视频列表'" 
    	style="width:280px;overflow: hidden; ">
    	<table id="dataGrid" data-options="fit:true,border:false"></table>
    </div>
    <div id="toolbar" style="display: none;">
        <shiro:hasPermission name="video/personalvideo/add">
            <a onclick="addFun();" href="javascript:void(0);" class="easyui-linkbutton" 
            	data-options="plain:true,iconCls:'fi-plus icon-black'">上传</a>
        </shiro:hasPermission>  
        
        <a onclick="playListFun();" href="javascript:void(0);" class="easyui-linkbutton" 
        	data-options="plain:true,iconCls:'fi-play icon-black'">播放</a>
        	
        <a onclick="pauseOrPlayFun(this);" href="javascript:void(0);" class="easyui-linkbutton" 
        	data-options="plain:true,iconCls:'fi-pause icon-black'">暂停</a>	
        
        <a onclick="reloadFun();" href="javascript:void(0);" class="easyui-linkbutton" 
        	data-options="plain:true,iconCls:'fi-loop icon-black'">重放</a>	
    </div>
    
	<div data-options="region:'center',border:true,title:''" >
		<div id="myPlayerPanel" class="easyui-panel" title="请选择要播放的视频" style="width:100%;padding:2px;"
			data-options="iconCls:'fi-video icon-black',fit:true"
			>
			<!-- videojs视频播放器 -->
			<video id="my-player" class="video-js vjs-big-play-centered">
<!-- 			<source id="mp4src" src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> -->
			</video>
			<div><!-- 收藏、点赞、转发、分享等功能 -->
				<!-- <a href="javascript:myPlayer.play();" class="easyui-linkbutton" 
	       			data-options="iconCls:'fi-play icon-black',plain:true" 
	       			>开始/恢复播放</a> -->
	       			
	       		<!-- <a href="javascript:myPlayer.pause();" class="easyui-linkbutton" 
	       			data-options="iconCls:'fi-pause icon-black',plain:true" 
	       			>暂停播放</a> -->
	       			
	       		<!-- <a href="javascript:myPlayer.ended();" class="easyui-linkbutton" 
	       			data-options="iconCls:'fi-stop icon-black',plain:true" 
	       			>结束播放</a> -->	
	       			
				<!-- <a href="javascript:void(0);" class="easyui-linkbutton" 
	       			data-options="iconCls:'fi-loop icon-black',plain:true" 
	       			onclick="reloadFun();">重新播放</a> -->
			</div>
	    </div>
		<div id="p1" class="easyui-panel" title="评论" style="width:100%;padding:10px;"
			data-options="iconCls:'fi-comments icon-black',collapsible:true,maximizable:true,fit:true"
			>
			测试。。。。
	    </div>
    </div>
</body>
</html>
